.login {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  // Vue 的绝对路径写法
  // background-image: url('~@/assets/login.png');
  // React 绝对路径写法
  background-image: url('~assets/login.png');
  // 🔔 :global {} 结构包起来的样式，不会改名
  :global {
    .login-container {
      width: 440px;
      height: 360px;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

    .login-logo {
      width: 200px;
      height: 60px;
      display: block;
      margin: 0 auto 20px;
    }
  }
}

// .aa 不改名
// :global(.aa) {
//   background-color: pink;
// }

// 被 :global {} 包起来的都不改名
// :global {
//   .bb {
//     background-color: red;
//   }
//   .cc {
//     background-color: blue;
//   }
// }
